<template>
    <div class="images">
       <div id="slider" class="mui-slider">
            <div id="sliderSegmentedControl" ref="wrapper" class="list-wrapper mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" data-scroll="1">
                <div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                    <a :class="['mui-control-item',{'mui-active': index === defaultindex}]" href="#item1mobile" data-wid="tab-top-subpage-1.html" v-for="(item,index) in photolist" :key="item.id" @click="handle(index,item.id)">
                       {{item.title}}
                    </a>
                </div>
            </div>
        </div>
        <ul>
            <li v-for="item in list" :key="item.id">
                <img v-lazy="item.img_url">
            </li>
        </ul>
    </div>
</template>

<script>
import BScroll from "better-scroll";
import { Toast } from "mint-ui";
export default {
  data: () => ({
    options: {
      scrollX: true // 因为scrollY默认为true，其实可以省略
    },
    defaultindex: 0,
    photolist:[],
    list:[]
  }),
  created(){
      this.getcategory()
      this.handle('',0)
  },
  mounted() {
    setTimeout(() => {
      this.scroll = new BScroll(this.$refs.wrapper, this.options);
    }, 20);
  },
  methods:{
      getcategory(){
          this.$http.get("http://127.0.0.1:5000/api/getimgcategory").then(result=>{
            //   console.log(result)
          if(result.body.status === 0){
                  result.body.message.unshift({title:"全部",id:0})
              this.photolist = result.body.message
          }
        })
      },
      handle(id,cateid){
        //   console.log(id)
        this.defaultindex = id
         this.$http.get("http://127.0.0.1:5000/api/getimages/" + cateid).then(result=>{
            console.log(result)
            if(result.body.status === 0){
                this.list = result.body.message
            }else{
                  Toast("获取数据错误");
            }
        })
      }
    }
};
</script>

<style lang="less" scoped>
 img[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}
ul{
    padding-right: 35px;
    list-style: none;
    img{
        width:100%;
        height:100%;
    }
}
</style>